<template>
  <view class="custom-tabbar">
    <view 
      class="tabbar-item" 
      :class="{ 
        'active': currentIndex === index,
        'tab-clicked': clickedIndex === index
      }" 
      v-for="(item, index) in tabList" 
      :key="index" 
      @click="switchTab(item.pagePath, index)"
    >
      <!-- 圆形背景及其中的图标 - 仅选中状态显示 -->
      <view class="tabbar-circle-bg" v-if="currentIndex === index">
        <view class="tabbar-circle-inner"></view>
        <image class="tabbar-icon active-icon" :src="item.selectedIconPath" mode="aspectFit"></image>
      </view>
      
      <!-- 常规图标 - 非选中状态 -->
      <view class="tabbar-icon-wrapper" v-if="currentIndex !== index">
        <image class="tabbar-icon" :src="item.iconPath" mode="aspectFit"></image>
      </view>
      
      <!-- 文字部分 -->
      <text class="tabbar-text" :class="{'selected-text': currentIndex === index}">{{ item.text }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: #ffffff;
  border-top: 1px solid #f5f5f5;
  z-index: 9999;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.03);
  overflow: visible;
}

.tabbar-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6rpx;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  &.active {
    transform: translateY(-3rpx);
    
    /* 添加白色连接块，实现与导航栏的融合 */
    &::before {
      content: '';
      position: absolute;
      top: -5rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 94rpx;
      height: 10rpx;
      background: #ffffff;
      z-index: 3;
    }
  }
  
  /* 添加点击涟漪效果 */
  &::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }
  
  &.tab-clicked::after {
    animation: tabRipple 0.6s ease-out;
  }
}

@keyframes tabRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 120rpx;
    height: 120rpx;
    opacity: 0;
  }
}

/* 白色圆环 */
.tabbar-circle-bg {
  position: absolute;
  top: -25rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: circleAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* 顶部阴影 - 单独元素实现 */
  &::before {
    content: '';
    position: absolute;
    top: -6rpx;
    left: -6rpx;
    right: -6rpx;
    bottom: -6rpx;
    border-radius: 50%;
    background: #ffffff;
    z-index: 4;
    /* 使用径向渐变模拟顶部阴影 */
    background: radial-gradient(
      circle at center 20%, 
      #ffffff 60%, 
      rgba(235, 235, 235, 0.9) 100%
    );
    box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
  }
  
  /* 白色圆环下半部分 - 覆盖底部阴影 */
  &::after {
    content: '';
    position: absolute;
    top: 45%;
    left: -6rpx;
    right: -6rpx;
    bottom: -6rpx;
    background: #ffffff;
    z-index: 5;
    border-radius: 0 0 100rpx 100rpx;
  }
  
  /* 橙色圆形 - 放在最上层 */
  .tabbar-circle-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, #FF7B00, #FF6B00);
    box-shadow: 0 -2rpx 15rpx rgba(255, 107, 0, 0.3);
    z-index: 6;
    transform: scale(0.95);
    animation: pulseCircle 2s infinite alternate ease-in-out;
  }
}

@keyframes circleAppear {
  0% {
    transform: translateX(-50%) scale(0.7);
    opacity: 0;
  }
  70% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

@keyframes pulseCircle {
  0% {
    transform: scale(0.95);
    box-shadow: 0 -2rpx 15rpx rgba(255, 107, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 -2rpx 18rpx rgba(255, 107, 0, 0.4);
  }
}

/* 选中状态的图标 */
.tabbar-icon.active-icon {
  width: 42rpx;
  height: 42rpx;
  object-fit: contain;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 10;
  animation: fadeInRotate 0.3s ease-out;
}

@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes smoothFadeIn {
  from {
    opacity: 0.6;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 图标容器样式 */
.tabbar-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 42rpx;
  margin-bottom: 4rpx;
}

/* 图标样式 */
.tabbar-icon {
  width: 40rpx;
  height: 40rpx;
  transition: all 0.3s;
}

/* 文字样式 */
.tabbar-text {
  font-size: 20rpx;
  color: #999;
  margin-top: 2rpx;
  transition: all 0.3s ease;
  letter-spacing: 0.5rpx;
}

/* 选中文字样式 */
.selected-text {
  color: #FF6B00;
  font-weight: 500;
  margin-top: 36rpx;
  transform: scale(1.02);
  animation: textAppear 0.4s ease-out;
}

@keyframes textAppear {
  0% {
    opacity: 0;
    transform: translateY(8rpx);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* 适配不同环境 */
/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-QQ */
.custom-tabbar {
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

/* APP平台底部安全区域适配 */
/* #ifdef APP-PLUS */
.custom-tabbar {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(90rpx + constant(safe-area-inset-bottom));
  height: calc(90rpx + env(safe-area-inset-bottom));
}

.tabbar-circle-bg {
  top: -40rpx;
}
/* #endif */

/* H5平台适配 */
/* #ifdef H5 */
.custom-tabbar {
  height: 110rpx;
}
/* #endif */
</style>

<script>
export default {
  name: 'CustomTabbar',
  data() {
    return {
      // 标签页列表
      tabList: [
        {
          pagePath: "/pages/index",
          iconPath: "/static/images/tabbar/product.png",
          selectedIconPath: "/static/images/tabbar/product_.png",
          text: "商品"
        },
        {
          pagePath: "/pages/sellment/cart/index",
          iconPath: "/static/images/tabbar/cart.png",
          selectedIconPath: "/static/images/tabbar/cart_.png",
          text: "购物车"
        },
        {
          pagePath: "/pages/mine",
          iconPath: "/static/images/tabbar/mine.png",
          selectedIconPath: "/static/images/tabbar/mine_.png",
          text: "我的"
        }
      ],
      currentIndex: 0, // 当前选中的索引
      isTabSwitching: false, // 切换标志
      clickedIndex: -1 // 跟踪点击的索引，用于添加点击动画效果
    };
  },
  created() {
    // 初始化时从App全局状态获取当前索引
    const app = getApp();
    if (app && app.globalData) {
      this.currentIndex = app.globalData.currentTab || 0;
    }
    
    // 获取当前页面路径
    const pages = getCurrentPages();
    if (pages.length) {
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      // 检查是否是tabbar页面并更新索引
      this.updateCurrentIndex(route);
    }
    
    // 监听页面切换
    uni.$on('tabChange', (event) => {
      if (event && event.path) {
        this.updateCurrentIndex(event.path);
      }
    });
  },
  beforeDestroy() {
    // 移除事件监听
    uni.$off('tabChange');
  },
  methods: {
    // 更新当前选中的索引
    updateCurrentIndex(path) {
      const index = this.tabList.findIndex(item => 
        path.includes(item.pagePath.replace(/^\//, ''))
      );
      
      if (index !== -1) {
        this.currentIndex = index;
        // 同步到App全局状态
        const app = getApp();
        if (app && app.globalData) {
          app.globalData.currentTab = index;
        }
      }
    },
    
    switchTab(path, index) {
      if (this.currentIndex === index || this.isTabSwitching) return;
      
      // 添加点击反馈
      this.addClickFeedback(index);
      
      // 设置切换标志，用于UI动画效果
      this.isTabSwitching = true;
      
      // 更新索引
      this.currentIndex = index;
      
      // 同步到App全局状态
      const app = getApp();
      if (app && app.globalData) {
        app.globalData.currentTab = index;
      }
      
      // 页面跳转
      uni.reLaunch({
        url: path,
        success: () => {
          console.log('Tab switched to:', path);
          // 动画完成后重置标志
          setTimeout(() => {
            this.isTabSwitching = false;
          }, 300);
        },
        fail: (err) => {
          console.error('Tab switch failed:', err);
          // 回滚状态
          this.isTabSwitching = false;
          this.updateCurrentIndex(getCurrentPages()[getCurrentPages().length - 1].route);
        }
      });
    },
    
    // 添加点击动画效果
    addClickFeedback(index) {
      // 设置点击的索引，触发涟漪效果
      this.clickedIndex = index;
      
      // 播放轻微震动反馈(部分平台支持)
      // #ifdef APP-PLUS || MP-WEIXIN
      uni.vibrateShort();
      // #endif
      
      // 300ms后重置点击状态
      setTimeout(() => {
        this.clickedIndex = -1;
      }, 600);
    }
  }
};
</script>